<template>
  <view class="container">
    <u-navbar :autoBack="true" title="我的" :bgColor="theme.subColor" placeholder></u-navbar>
    <view class="bg-box" :style="{ top: top + 'px' }">
      <view class="bg-content">
        <!-- :style="{ top: top + 'px' }" -->
        <view class="user">
          <view class="user-avatar">
            <image class="avatar" :src="avatar" mode="scaleToFill" />
          </view>
          <view class="user-name">
            <view class="name">{{ userInfo.name }}</view>
            <view class="id">ID: {{ userInfo.user_id }}</view>
          </view>
          <view class="edit" @click="toPath('/pages/user/user-info/user-info')">
            <u-icon name="edit-pen-fill" color="rgba(10, 63, 255, 1)" size="34rpx"></u-icon>
            <text style="margin-left: 6rpx">编辑</text>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="statistics">
        <view class="item">
          <view class="item-count">
            {{ userInfo.count_message_day }}/{{ setting.message_count_day }}
          </view>
          <view class="item-text">今日对话次数</view>
        </view>
        <view class="item">
          <view class="item-count">{{ userInfo.sum_token_day }}/{{ setting.token_count_day }}</view>
          <view class="item-text">今日使用字数</view>
        </view>
      </view>
      <view class="Progress">
        <view>
          <view class="progresstit">
            <text>总对话次数</text>
            <text style="color: rgba(136, 136, 136, 1); font-size: 28rpx">
              {{ userInfo.count_message_total }}/{{ setting.message_count_total }}
            </text>
          </view>

          <u-line-progress
            height="4"
            :percentage="
              parseInt((userInfo.count_message_total * 100) / setting.message_count_total)
            "
            activeColor="rgba(10, 63, 255, 1)"
            :showText="false"
          ></u-line-progress>
        </view>
        <view>
          <view class="progresstit">
            <text>总使用字数</text>
            <text style="color: rgba(136, 136, 136, 1); font-size: 28rpx">
              {{ userInfo.sum_token_total }}/{{ setting.token_count_total }}
            </text>
          </view>
          <u-line-progress
            height="4"
            :percentage="parseInt((userInfo.sum_token_total * 100) / setting.token_count_total)"
            activeColor="rgba(10, 63, 255, 1)"
            :showText="false"
          ></u-line-progress>
        </view>
      </view>
      <view class="cell-list">
        <u-cell-group :border="false" :customStyle="{ 'font-size': '24rpx', padding: '0 32rpx' }">
          <u-cell
            icon="edit-pen-fill"
            :isLink="true"
            url="/pages/user/user-info/user-info"
            title="编辑账户"
            :iconStyle="{ color: theme.mainColor, marginRight: '10rpx', fontSize: '36rpx' }"
            size="large"
          ></u-cell>
          <u-cell
            icon="share-square"
            isLink
            :iconStyle="{ color: theme.mainColor, marginRight: '10rpx', fontSize: '36rpx' }"
            size="large"
          >
            <view slot="title">
              <button open-type="share" class="share-btn">
                <text>一键分享</text>
                <!-- <text class="share-value">
                  邀请好友可获得{{ setting.inviter_reward_frequency || 5 }}次对话次数
                </text> -->
              </button>
            </view>
          </u-cell>
          <u-cell
            v-for="item in list"
            :key="item.title"
            size="large"
            :icon="item.icon"
            :title="item.title"
            :value="item.value"
            :isLink="item.isLink"
            :url="item.path"
            :iconStyle="{ color: theme.mainColor, marginRight: '10rpx', fontSize: '36rpx' }"
          ></u-cell>
        </u-cell-group>
      </view>
    </view>
    <!-- <view class="placeholder" :style="{ paddingBottom: bottom + 10 + 'px' }">
      <view class="placeholder-content">
        <image class="placeholder-icon" src="@/static/svg/logo.svg" mode="scaleToFill" />
        <text>MindDial</text>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
  data() {
    return {
      list: [
        // {
        //   title: '我的邀请',
        //   icon: 'man-add',
        //   path: '/pages/user/user-invite/user-invite',
        //   isLink: true,
        // },
        {
          title: '我的聊天分享',
          icon: 'share',
          path: '/pages/share/invite/index',
          isLink: true,
        },
        {
          title: '联系客服',
          icon: 'server-fill',
          path: '/pages/user/user-server-man/user-server-man',
          isLink: true,
        },
      ],
      top: 0,
      bottom: 0,
    }
  },
  onLoad() {
    this.top = uni.$u.sys().statusBarHeight + 60
    this.bottom = uni.$u.sys().safeAreaInsets.bottom
    this.$store.dispatch('getUserInfo', { statistic_data: [1, 2, 3, 4] })
  },

  computed: {
    userInfo() {
      return this.$store.state.auth.userInfo
    },
    isVip() {
      return this.$store.getters.isVip
    },
    vipExpireTime() {
      return uni.$u.timeFormat(this.userInfo.vipExpireTime, 'yyyy-mm-dd')
    },
    avatar() {
      return this.$store.getters.avatar
    },
    theme() {
      return this.$store.state.config.theme
    },
    setting() {
      return this.$store.state.chatAI.settingUserInfo
    },
  },
  methods: {
    toPath(path) {
      uni.navigateTo({
        url: path,
      })
    },
  },
}
</script>
<style lang="scss">
.u-cell__body {
  padding: 32rpx 0 !important;
}
</style>
<style scoped lang="scss">
.container {
  position: relative;
  min-height: 100vh;
  background: rgba(246, 247, 249, 1);
  display: flex;
  flex-direction: column;

  .bg-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150rpx;

    .bg-content {
      position: relative;
      width: 100%;
      height: 100%;

      .bg-logo {
        width: 100%;
        position: absolute;
        top: -150rpx;
        left: 0rpx;
        opacity: 0.2;
        filter: blur(10rpx);
      }
    }
  }

  .user {
    height: 128rpx;
    position: absolute;
    left: 40rpx;
    z-index: 10;
    display: flex;
    position: relative;
    .user-avatar {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      background: #fff;
      box-sizing: border-box;
      // border: 4rpx solid #fff;
      // box-shadow: 0 0 10rpx 2rpx rgba($color: #fff, $alpha: 0.2);
      margin-right: 24rpx;
      // display: flex;
      // justify-content: center;
      // align-items: center;

      .avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
      }
    }

    .user-name {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .name {
        color: #222;
        font-size: 36rpx;
      }

      .id {
        color: #666;
        font-size: 28rpx;
        margin-top: 10rpx;
      }
    }
    .edit {
      position: absolute;
      top: 22rpx;
      right: 120rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: rgba(10, 63, 255, 1);
    }
  }

  .content {
    position: relative;
    z-index: 20;
    margin-top: 192rpx;
    padding: 0 26rpx;

    .statistics {
      width: 100%;
      padding: 42rpx 0 36rpx 0;
      border-radius: 20rpx;
      background: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .item-count {
          font-size: 32rpx;
          font-weight: 700;
          color: #333;
        }

        .item-text {
          margin-top: 14rpx;
          font-size: 28rpx;
          color: rgba(136, 136, 136, 1);
        }
      }
    }
    .Progress {
      border-radius: 20rpx;
      padding: 32rpx 32rpx 42rpx 32rpx;
      box-sizing: border-box;
      margin-top: 12rpx;
      background: #fff;
      height: 244rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .progresstit {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        font-size: 32rpx;
      }
    }
    .cell-list {
      border-radius: 20rpx;
      overflow: hidden;
      height: 420rpx;
      // height: 520rpx;
      margin-top: 32rpx;
      padding-top: 2rpx;
      // box-sizing: border-box;
      background: #fff;
    }
  }

  .placeholder {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex: 1;
  }

  .placeholder-content {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38rpx;
    color: #b2b2b2;
    opacity: 0.5;

    .placeholder-icon {
      width: 60rpx;
      height: 60rpx;
      margin-right: 10rpx;
      filter: invert(0.5);
    }
  }
}

.share-btn {
  background: transparent;
  text-align: left;
  border: none;
  padding: 0;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 32rpx;
  color: #303133;
  display: flex;
  justify-content: space-between;
  font-weight: 500;

  &::after {
    display: none;
  }

  .share-value {
    font-size: 24rpx;
    color: #999;
  }
}
::v-deep .u-cell__title-text--large {
  font-size: 32rpx !important;
  font-weight: 500;
}
</style>
